<template>
  <aside class="app-sidebar">
    <ul>
      <li v-for="course in courses" :key="course.id" @mouseover="showHoverImage(course.resource_url)"
        @mouseleave="hideHoverImage" @click="goToCourse(course.id)">
        {{ course.semester_name }}
        <div v-if="hoverImageUrl === course.resource_url" class="hover-image">
          <img :src="hoverImageUrl" alt="Hover Image" />
        </div>
      </li>
    </ul>
  </aside>
  <div class="block">
    <el-carousel trigger="click" height="400px">
      <el-carousel-item v-for="course in courses" :key="course.id" @click="goToCourse(course.id)">
        <img :src="course.resource_url" alt="Course Image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "AppSidebar",
  data() {
    return {
      courses: [],
      hoverImageUrl: null, // 当前鼠标悬停时显示的图片URL  
    };
  },
  methods: {
    showHoverImage(url) {
      this.hoverImageUrl = url;
      this.hoverImageVisible = true;
    },
    hideHoverImage() {
      this.hoverImageUrl = null;
      this.hoverImageVisible = false;
    },
    //输出获取到的id值到跳转页面
    goToCourse(id) {
      console.log('Clicked course id:', id);
      this.$router.push({
        name: 'CourseIntro',
        query: {
          course_id: id  // 将 id 作为参数传递
        }
      });
    },
  },
  mounted() {
    // 发起 POST 请求获取课程数据
    axios
      .get("http://8.138.12.59:1999/semester/showjingpin", {

        params: {
          course_id: "1"
        }
      })
      .then((response) => {
        // 请求成功处理
        if (response.data.status === 1) {
          // 清空当前的 courses 数组
          this.courses = [];
          this.courses = response.data.data.slice(0, 5);
          // 处理返回的课程数据
          // response.data.data.forEach((courseData) => {
          //   // 将接口返回的数据转换为需要的格式
          //   const course = {
          //     id: courseData.course_id, // 暂时使用数组长度作为 ID，实际应根据接口数据确定唯一 ID
          //     semester_name: courseData.semester_name,
          //     resource_url: courseData.resource_url, // 添加课程图片资源链接
          //   };
          //   this.courses.push(course);
          // });
        } else {
          // 请求失败处理
          console.error("请求失败:", response.data.msg);
        }
      })
      .catch((error) => {
        // 请求错误处理
        console.error("请求错误:", error);
      });
  },

};
</script>

<style scoped>
.app-sidebar {
  width: 200px;
  padding-top: 1rem;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 10px 0 0 10px;
  background: rgba(36, 41, 47, 0.8);
  z-index: 1000;
  margin-top: 5px;

}

.app-sidebar ul {
  list-style: none;
  padding: 0;
}

.app-sidebar li {
  padding: 0.7rem 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  padding-left: 30px;
}

.app-sidebar li:hover {
  background: rgba(36, 41, 47, 1);

}

.block {
  width: 100%;
  /* 或者使用具体的宽度值，比如 600px */
  margin: auto;
  /* 水平居中 */
  height: 100%;
  z-index: 1;
  margin-top: 5px;
  border-radius: 0 10px 10px 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 10px 10px 0;
}

.hover-image {
  position: absolute;
  top: 153px;
  /* 或其他值，根据需要调整 */
  left: 331px;
  width: 1166px;
  height: 400px;
  overflow: hidden;
  /* 如果图片需要裁剪 */
  display: flex;
  align-items: center;
  /* 垂直居中图片 */
  justify-content: center;
  /* 水平居中图片 */
  background-color: rgb(17, 243, 21);
  opacity: 0;
  /* 初始时隐藏 */
  margin-top: 5px;
  z-index: 10001;
  border-radius: 0 10px 10px 0;
}

.hover-image img {
  width: 100%;
  /* 宽度填满hover-image容器 */
  height: auto;
  /* 高度自动调整以保持宽高比 */
  object-fit: contain;
  /* 根据需要调整，如cover, contain等 */
  border-radius: 0 10px 10px 0;
}

.app-sidebar ul li:hover .hover-image {
  opacity: 1;
  /* 显示图片 */
}
</style>